<template>
  <div class="login">
    <MainTitle v-for="(item, index) in name" :key="index" :data="item"></MainTitle>
    <div class="form">
      <el-form :model="formData" ref="formRef" :rules="rules">
        <el-form-item prop="account">
          <template #label>
            <div class="form-label-right">
              <span style="color: #f56c6c;">*</span>
              <span style="margin-left: 4px;">账号</span>
            </div>
          </template>
          <el-input v-model="formData.account" size="large" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <template #label>
            <div class="form-label-right">
              <span style="color: #f56c6c;">*</span>
              <span style="margin-left: 4px;">密码</span>
            </div>
          </template>
          <el-input
            v-model="formData.password"
            size="large"
            type="password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="group">
          <template #label>
            <div class="form-label-right">
              <span style="color: #f56c6c;">*</span>
              <span style="margin-left: 4px;">用户组</span>
            </div>
          </template>
          <el-select v-model="formData.group" placeholder="请选择用户组" style="width: 100%;" size="large">
            <el-option label="超级管理员" value="admin"></el-option>
            <el-option label="普通管理员" value="user"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">立即添加</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { checkLogin } from '@/api/account.js'
import { ElMessage } from 'element-plus'

import MainTitle from '@/components/MainTitle.vue'

const name = [
  {
    title: '添加账号'
  }
]

const router = useRouter()

const formData = reactive({
  account: '',
  password: '',
  group: '' // 新增用户组字段
})

const formRef = ref()

const login = () => {
  formRef.value.validate(async (res) => {
    if (res) {
      let { code, msg, id, role, token } = await checkLogin(formData)
      if (code == 0) {
        sessionStorage.setItem('user', JSON.stringify({ id, role, token }))
        ElMessage.success(msg)
        router.push('/home')
      } else {
        ElMessage.error(msg)
      }
    }
  })
}

const validateAccount = (rule, value, callback) => {
  let reg = /^([a-z]|[0-9]){4,11}$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的账号'))
  }
}
const validatePassword = (rule, value, callback) => {
  let reg = /^([a-z]|[0-9]){4,11}$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的密码'))
  }
}
const validateGroup = (rule, value, callback) => {
  if (value) {
    callback()
  } else {
    callback(new Error('请选择用户组'))
  }
}
const rules = reactive({
  account: [
    { validator: validateAccount, trigger: 'blur' }
  ],
  password: [
    { validator: validatePassword, trigger: 'blur' }
  ],
  group: [
    { validator: validateGroup, trigger: 'change' }
  ]
})
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
}

.form {
  width: 300px;
  height: 300px;
  margin-left: 24px;
}

.form-label-right {
  display: flex;
  align-items: center;
  width: 53px;
  justify-content: flex-end; /* 向右对齐 */
  padding-right: 10px; /* 右侧增加一些空间 */
}
</style>